<script setup>
import { getEnterpriseAccountApi } from '@/api/job';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElCard, ElRate, ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { addWatermark, removeWatermark } from '@/utils/common/watermark'

const route = useRoute()
const account = route.query.account
console.log('企业账号:', account);
const enterInfo=ref({})
const entryDescData=ref([])
async function getEnterpriseAccountData(){
  const res=await getEnterpriseAccountApi({
    account: account
  })
  enterInfo.value=res.data[0]

  entryDescData.value=res.entryDescData

  // 添加水印
  addWatermark(`${enterInfo.value.enterpriseName}`)
  
}
onMounted(() => {
  getEnterpriseAccountData()

  
})
// 在组件销毁前移除水印
onBeforeUnmount(() => {
  removeWatermark()
})
</script>

<template>
  <div class="enterprise-detail">
    <el-card class="enterprise-info">
      <template #header>
        <div class="card-header">
          <span>企业基本信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="企业名称">{{ enterInfo.enterpriseName }}</el-descriptions-item>
        <el-descriptions-item label="所属行业">{{ enterInfo.industry }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ enterInfo.phone }}</el-descriptions-item>
        <el-descriptions-item label="企业类型">{{ enterInfo.identity }}</el-descriptions-item>
        <el-descriptions-item label="企业地址" :span="2">
          {{ enterInfo.enterpriseAddress ? JSON.parse(enterInfo.enterpriseAddress).join('') + enterInfo.detailAddress : enterInfo.detailAddress || '暂无地址信息' }}
        </el-descriptions-item>
        <el-descriptions-item label="企业简介" :span="2">{{ enterInfo.detail || '暂无简介' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="rating-records">
      <template #header>
        <div class="card-header">
          <span>评分记录</span>
        </div>
      </template>
      <div v-if="entryDescData.length === 0" class="no-data">暂无评分记录</div>
      <div v-else class="rating-list">
        <div v-for="(item, index) in entryDescData" :key="index" class="rating-item">
          <div class="job-name">{{ item.jobName }}</div>
          <div class="rating">
            评分：<el-rate v-model="item.rate" disabled show-score />
          </div>
          <div class="desc">评价：{{ item.desc }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.enterprise-detail {
  padding: 20px;
  
  .enterprise-info, .rating-records {
    margin-bottom: 20px;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
  }

  .rating-list {
    .rating-item {
      padding: 15px;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }

      .job-name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .rating {
        margin-bottom: 10px;
      }

      .desc {
        color: #666;
      }
    }
  }

  .no-data {
    text-align: center;
    color: #999;
    padding: 20px;
  }
}
</style>